<template>
  <div class="user-center-container">
    <el-card shadow="never">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本设置" name="setting-baseinfo" />
        <el-tab-pane label="安全设置" name="setting-security" />
        <el-tab-pane label="账户设置" name="setting-bindding" />
        <el-tab-pane label="LDAP" name="setting-ldap" />
      </el-tabs>

      <SettingBaseInfo v-if="activeName === 'setting-baseinfo'" />
      <SettingSecurity v-if="activeName === 'setting-security'" />
      <SettingBinding v-if="activeName === 'setting-bindding'" />
      <SettingLdap v-if="activeName === 'setting-ldap'" />
    </el-card>
  </div>
</template>

<script>
import SettingBaseInfo from './setBaseInfo'
import SettingSecurity from './setSecurity'
import SettingBinding from './setBinding'
import SettingLdap from './setLdap'
import { param2Obj } from '@/utils'
import { ucApi } from '@/api/api'

export default {
  components: {
    SettingBaseInfo,
    SettingSecurity,
    SettingBinding,
    SettingLdap
  },
  data() {
    return {
      activeName: 'setting-baseinfo'
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        if (route) {
          const state = this._getQueryVariable('state')
          const code = this._getQueryVariable('code')
          if (state && state === 'dingtalk') {
            this.bindDingTalk(code)
          }
          if (state && state === 'wechat') {
            this.bindWeChat(code)
          }
          if (state && state === 'unbindDingtalk') {
            this.unbindDingtalk(code)
          }
          if (state && state === 'unbindWechat') {
            this.unbindWechat(code)
          }
        }
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    // 绑定钉钉
    async bindDingTalk(code) {
      try {
        await this.$request(ucApi.bindDingTalk, { code })
        this.$message({
          message: '钉钉账号绑定成功',
          type: 'success'
        })
        this.$router.push('/usercenter')
      } catch (error) {
        console.log(error)
      }
    },
    // 解绑钉钉
    async unbindDingtalk(code) {
      try {
        await this.$request(ucApi.unbindDingTalk, { code })
        this.$message({
          message: '解绑成功',
          type: 'success'
        })
        this.$router.push('/usercenter')
      } catch (error) {
        console.log(error)
      }
    },
    // 绑定微信
    async bindWeChat(code) {
      try {
        await this.$request(ucApi.bindWechat, { code })
        this.$message({
          message: '微信账号绑定成功',
          type: 'success'
        })
        this.$router.push({ name: 'UserCenter' })
      } catch (error) {
        console.log(error)
      }
    },
    // 解绑微信
    async unbindWechat(code) {
      try {
        await this.$request(ucApi.unbindWechat, { code })
        this.$message({
          message: '解绑成功',
          type: 'success'
        })
        this.$router.push({ name: 'UserCenter' })
      } catch (error) {
        console.log(error)
      }
    },

    // 判断url参数
    _getQueryVariable(variable) {
      let query = param2Obj(window.location.href)
      if (Object.prototype.hasOwnProperty.call(query, variable)) {
        return query[variable]
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.user-center-container {
  .el-card {
    ::v-deep.el-card__body {
      padding: 43px 56px;
    }
    height: calc(100vh - 90px);
  }
  ::v-deep.el-tabs__nav-wrap::after {
    background: #eeeeee;
  }
}
</style>
